<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition>
        <div class="panelTitulo">
            INFORMACION PERSONAL
        </div> 
        <h:form id="UsuarioEditForm">
            <div style="width: 70%; float: left;">
                <p:panel header="Información personal" style="border: none;" >
                    <h:panelGroup id="display">
                        <h:panelGrid columns="4" 
                                     border="0" 
                                     cellspacing="4" 
                                     cellpadding="0" 
                                     columnClasses="column1Class, column2Class,column3Class,column4Class" >
                            <p:inputText id="idUsuario" 
                                         value="#{usuarioController.selected.idUsuario}" 
                                         title="#{bundle.EditUsuarioTitle_idUsuario}" 
                                         required="true" rendered="false" />
                            <p:outputLabel value="#{bundle.EditUsuarioLabel_tipoDocumento}" 
                                           for="numDocumento" />
                            <p:inputText id="numDocumento" 
                                         styleClass="inputText" 
                                         value="#{usuarioController.selected.identidad}" 
                                         title="#{bundle.EditUsuarioLabel_tipoDocumento}" 
                                         requiredMessage="#{bundleEtiquetasES.Identidad} #{bundleEtiquetasES.CampoRequerido}"  
                                         disabled="false"/>
                            <p:outputLabel/>
                            <p:outputLabel/>
                            <p:outputLabel value="#{bundle.EditUsuarioLabel_nombres}" 
                                           for="nombres" />
                            <p:inputText id="nombres" 
                                         styleClass="inputText" 
                                         value="#{usuarioController.selected.nombres}" 
                                         title="#{bundle.EditUsuarioTitle_nombres}"
                                         required="true" >

                            </p:inputText>
                            <p:outputLabel value="#{bundle.EditUsuarioLabel_apellidos}" 
                                           for="apellidos" />
                            <p:inputText id="apellidos" 
                                         styleClass="inputText" 
                                         value="#{usuarioController.selected.apellidos}"
                                         title="#{bundle.EditUsuarioTitle_apellidos}"/>
                            <p:outputLabel value="#{bundle.EditUsuarioLabel_fechaNacimiento}"
                                           for="fechaNacimiento" />
                            <p:calendar id="fechaNacimiento" 
                                        pattern="dd/MM/yyyy"
                                        value="#{usuarioController.selected.fechaNacimiento}"
                                        title="#{bundle.EditUsuarioTitle_fechaNacimiento}"
                                        required="true"
                                        navigator="true"
                                      
                                        requiredMessage="#{bundle.EditUsuarioRequiredMessage_fechaNacimiento}"/>
                            <p:outputLabel value="#{bundle.EditUsuarioLabel_edad}"
                                           for="edad" />
                            <p:inputText id="edad" 
                                         styleClass="inputText" 
                                         value="#{usuarioController.selected.edad}"
                                         title="#{bundle.EditUsuarioTitle_edad}"
                                         required="true" 
                                         requiredMessage="#{bundle.EditUsuarioRequiredMessage_edad}"
                                         disabled="true"/>
                            <p:outputLabel value="#{bundle.EditUsuarioLabel_genero}"
                                           for="genero" />
                            <p:selectOneMenu id="genero"
                                             value="#{usuarioController.selected.genero}" 
                                             required="true" >
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Seleccione}"/>
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Masculino}" itemValue="M" />
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Femenino}" itemValue="F" />
                            </p:selectOneMenu>
                            <p:outputLabel value="#{bundleEtiquetasES.EstadoCivil}"
                                           for="estadoCivil" />
                            <p:selectOneMenu id="estadoCivil" 
                                             value="#{usuarioController.selected.estadoCivil}"
                                             required="true" 
                                             requiredMessage="#{bundleEtiquetasES.EstadoCivil} - #{bundleEtiquetasES.CampoRequerido}">
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Seleccione}"/>
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Soltero}" itemValue="S" />  
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Casado}" itemValue="C" />
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Divorciado}" itemValue="D" />
                                <f:selectItem itemLabel="#{bundleEtiquetasES.UnionLibre}" itemValue="U" />
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Viudo}" itemValue="V" />  
                            </p:selectOneMenu>
                            <p:outputLabel value="#{bundleEtiquetasES.Disponibilidad}" for="disponibilidad" />
                            <p:selectOneMenu id="disponibilidad" 
                                             value="#{usuarioController.selected.disponibilidad}"
                                             required="true" 
                                             requiredMessage="#{bundleEtiquetasES.EstadoCivil} - #{bundleEtiquetasES.CampoRequerido}">
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Seleccione}"/>
                                <f:selectItem itemLabel="#{bundleEtiquetasES.TiempoCompleto}" itemValue="C" />  
                                <f:selectItem itemLabel="#{bundleEtiquetasES.MedioTiempo}" itemValue="M" />
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Otro}" itemValue="O" />  
                            </p:selectOneMenu>
                            <p:outputLabel/>
                            <p:outputLabel/>
                        </h:panelGrid>
                    </h:panelGroup>

                </p:panel>
                <p:panel header="Descripcion Perfil" style="border: none;" >
                    <p:inputTextarea id="desPerfil" value="#{usuarioController.selected.perfil}"  rows="7" cols="140">
                        <p:watermark for="desPerfil" value="Ingrese informacion referente a"/>
                        <p:ajax event="keyup" listener="#{usuarioController.getTamanoCampo()}" update="espaciosdisponibles"/>     
                    </p:inputTextarea>

                    <f:facet name="footer">
                        <h:outputText id="espaciosdisponibles" value="Caracteres Restantes: #{usuarioController.tamano}"/>
                        <p/>
                        <p:outputLabel value="Nota: " style="color:red; "/>
                        <p:outputLabel value="Tiene 500 caracteres para describir su perfil" style="color:#6600ff; "/>
                    </f:facet>
                </p:panel>
            </div>
            <div style="width: 30%; float:left; margin: auto;">
                <p:panel id="panelFoto" header="Foto" style="border: none; margin: auto;">
                    <div style="width: 50%; margin: auto;">
                        <p:lightBox styleClass="imagebox" id="lighbox1"> 
                            <h:outputLink value="#{usuarioController.selected.url}" title="Foto de Perfil">
                                <h:graphicImage  id="fotoPerfil" style="margin: auto;" value="#{usuarioController.selected.url}" 
                                                 height="150" width="110%" />
                            </h:outputLink>
                        </p:lightBox>
                        <p/>
                        <p:commandButton value="Cambiar Foto" 
                                         icon="ui-icon-refresh" 
                                         type="button" 
                                         onclick="PF('dlg2').show();" /></div>

                </p:panel>
            </div>
            <div style="clear:both; width: 70%;">
                <p:panel header="Direccion Domiciliaria"  style="border: none;">
                    <h:panelGroup id="display1">
                        <h:panelGrid columns="4"
                                     border="0" 
                                     cellspacing="4" 
                                     cellpadding="0"
                                     columnClasses="column1Class, column2Class,column3Class,column4Class">
                            <p:outputLabel value="#{bundleEtiquetasES.Pais}" for="pais" />
                            <p:selectOneMenu id="pais" 
                                             value="#{usuarioController.pais}"
                                             required="true" 
                                             requiredMessage="#{bundleEtiquetasES.Pais} #{bundleEtiquetasES.CampoRequerido}">
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Seleccione}"/>
                                <f:selectItems value="#{usuarioController.itemPaises}"
                                               var="PaisItem"
                                               itemValue="#{PaisItem}"
                                               itemLabel="#{PaisItem.nombre}"
                                               />
                                <f:converter binding="#{paisConverter}"/>
                                <p:ajax event="change" 
                                        listener="#{usuarioController.cambiaPais()}" 
                                        update=":UsuarioEditForm:provincia,:UsuarioEditForm:ciudad"/>
                            </p:selectOneMenu>

                            <p:outputLabel value="#{bundleEtiquetasES.Provincia}" for="provincia" />
                            <p:selectOneMenu id="provincia" 
                                             value="#{usuarioController.provincia}"
                                             required="true" 
                                             requiredMessage="#{bundleEtiquetasES.Pais} #{bundleEtiquetasES.CampoRequerido}">
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Seleccione}"/>
                                <f:selectItems value="#{usuarioController.itemProvincias}"
                                               var="ProvinciaItem"
                                               itemValue="#{ProvinciaItem}"
                                               itemLabel="#{ProvinciaItem.nombre}"
                                               />
                                <f:converter binding="#{regionConverter}"/>
                                <p:ajax event="change" 
                                        listener="#{usuarioController.cambiaProvincia()}" 
                                        update=":UsuarioEditForm:ciudad"/>
                            </p:selectOneMenu>

                            <p:outputLabel value="#{bundleEtiquetasES.Ciudad}/CANTON" for="ciudad" />
                            <p:selectOneMenu id="ciudad" 
                                             value="#{usuarioController.selected.idCiudad}"
                                             required="true" 
                                             requiredMessage="#{bundleEtiquetasES.Pais} #{bundleEtiquetasES.CampoRequerido}">
                                <f:selectItem itemLabel="#{bundleEtiquetasES.Seleccione}"/>
                                <f:selectItems value="#{usuarioController.itemCiudades}"
                                               var="CiudadItem"
                                               itemValue="#{CiudadItem}"
                                               itemLabel="#{CiudadItem.nombre}"
                                               />
                                <f:converter binding="#{ciudadConverter}"/>
                            </p:selectOneMenu>

                            <p:outputLabel value="#{bundle.EditUsuarioLabel_direccion}" for="direccion" />
                            <p:inputText id="direccion"
                                         styleClass="inputText"
                                         value="#{usuarioController.selected.direccion}"
                                         title="#{bundle.EditUsuarioTitle_direccion}"
                                         required="true" requiredMessage="#{bundle.EditUsuarioRequiredMessage_direccion}">
                                <p:watermark for="direccion" value="Barrio, Calle 1, Calle 2, Num"/>
                            </p:inputText>
                            <p:outputLabel value="#{bundle.EditUsuarioLabel_telefonoFijo}"
                                           for="telefonoFijo" />
                            <p:inputText id="telefonoFijo"
                                         styleClass="inputText"
                                         value="#{usuarioController.selected.telefonoFijo}" 
                                         title="#{bundle.EditUsuarioTitle_telefonoFijo}" />
                            <p:outputLabel value="#{bundle.EditUsuarioLabel_telefonoMovil}"
                                           for="telefonoMovil" />
                            <p:inputText id="telefonoMovil"
                                         styleClass="inputText" 
                                         value="#{usuarioController.selected.telefonoMovil}"
                                         title="#{bundle.EditUsuarioTitle_telefonoMovil}">
                                <f:validator validatorId="numeroCelularValidador"/>
                                <p:message for="telefonoMovil" display="tooltip" />
                            </p:inputText>
                            <p:outputLabel value="#{bundle.EditUsuarioLabel_correoElectronico}"
                                           for="correoElectronico" />
                            <p:inputText id="correoElectronico"
                                         style="width: 230px; height: 15px;"
                                         value="#{usuarioController.selected.correoElectronico}"
                                         title="#{bundle.EditUsuarioTitle_correoElectronico}" 
                                         required="true" 
                                         requiredMessage="#{bundle.EditUsuarioRequiredMessage_correoElectronico}" 
                                         validatorMessage="Invalid email format">
                            </p:inputText>
                        </h:panelGrid>
                    </h:panelGroup>
                    <f:facet name="footer">
                        <p:outputLabel value="Importante: " style="color:red; "/>
                        <p:outputLabel value="Recuerde que la información entregada es indispensable para la búsqueda de un empleo acorde a sus necesidades, por lo tanto pedimos entregar los datos con veracidad, ya que la compañía la utilizara en cualquier momento para su beneficio
                                       La información ingresada queda bajo su responsabilidad y sera substituible de ser verificada por la compañía." style="color:#6600ff; "/>
                    </f:facet>
                </p:panel>
                <div style="margin-left: 50%; margin-bottom: 20px;">
                    <p:commandButton value="GUARDAR"
                                     actionListener="#{usuarioController.actualizarUsuario}" 
                                     icon="ui-icon-disk" ajax="false"
                                     validateClient="true"/>
                    <p:commandButton value="CANCELAR" 
                                     icon="ui-icon-closethick"/>
                </div>
            </div>
        </h:form>
        <p:dialog header="Selecionar foto de Perfil" widgetVar="dlg2" modal="true" height="500" width="800" resizable="false">

            <h:form id="SubirFotoUsuario" enctype="multipart/form-data">
                <p:fileUpload fileUploadListener="#{usuarioController.subirFoto}" 
                              mode="advanced" 
                              dragDropSupport="false"
                              label="Buscar Archivo"

                              update="messages,SubirFotoUsuario :UsuarioEditForm:fotoPerfil,SubirFotoUsuario :formUsuarioLogeado:fotoUsuarioLogueo" 
                              sizeLimit="900000" 
                              cancelLabel="Cancelar"
                              uploadLabel="Subir"
                              fileLimit="1" 
                              allowTypes="/(\.|\/)(gif|jpe?g|png)$/" 
                              oncomplete="PF('dlg2').hide();"/>
                <p:growl id="messages" showDetail="true" />
            </h:form>
        </p:dialog>
    </ui:composition>

</html>
